AuthRegisterView = BaseView.extend({
    className: 'full_height',

    events: {
        "click .register-btn": "register",
        "click .validate-phone": "validatePhone", //not only phone, but email
        "change": "change"
    },

    initialize: function(obj) {
        this.validate_count = 0;
        this.model.set('option', obj['summary']);
    },

    change: function(event) {
        // Apply the change to the model
        var target = event.target;
        var change = {};
        var value = $(target).val();

        if (value.trim) {
            value = value.trim();
        }

        change[target.name] = value;
        this.model.set(change);
    },

    register: function(e) {
        if (!this.model.isValid()) {
            toast(this.model.validationError, 'alert');
            return ;
        }

        var that = this;
        $('.register-btn').prop('disabled', true);

        $.ajax({
            method: "POST",
            url: 'smsCodeValidate',
            data: {sms_code: this.$el.find('.validation-code').val()},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        }).then(function(result) {
            if (parseInt(result) == 1) {
                var data = that.model.toJSON();
                $.ajax({
                    method: "POST",
                    url: ROOT_PATH + '/register',
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).then(function(data) {
                    if (data == 'no port user') {
                        toast(trans['common.port_contact_us'], 'alert');
                        $('.register-btn').prop('disabled', false);
                        return false;
                    }

                    if (data == 'leader') {
                        portRefuse = true;
                        loadTemplates(templateList).then(function() {
                            window.router.navigateTo('active');
                        });
                        return false;
                    }
                    loadTemplates(templateList).then(function() {
                        window.router.navigateTo('profile');
                    });

                }, function( jqXHR, textStatus, errorThrown) {
                    $('.register-btn').prop('disabled', false);
                    if (jqXHR.status === 422) {
                        toast(trans['user.phone_used'], 'alert');
                    } else {
                        toast(trans['common.server_error'], 'alert');
                    }
                });
            } else {
                $('.register-btn').prop('disabled', false);
                toast(trans['user.validation_code_error'], 'alert');
            }
        });
    },

    validatePhone: function() { 
        if ($('.validate-phone').prop("disabled")) {
            return ;
        }

        if (!this.model.get('mobile_phone')) {
            toast(trans['user.PLEASE_INPUT_PHONE'], 'alert');
            return ;
        }

        $.ajax({
            method: "POST",
            url: ROOT_PATH + '/sendSMS',
            data: {phone: this.model.get('mobile_phone')},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        }).done(function(data) {
            toast(trans['user.SMS_SENT']);
        });

        var count = 60;
        var interval = window.setInterval(function() {
            $('.validate-phone').html(trans['user.RESET_SMS'] + ' (' + count + ')');
            $('.validate-phone').prop("disabled", true);
            count -= 1;
            if (count == 0) {
                window.clearInterval(interval);
                $('.validate-phone').html(trans['user.RESET_SMS']);
                $('.validate-phone').prop("disabled", false);
            }
        }, 1000);
        //increase the count
        this.validate_count++;

    },

    render: function() {
        var obj = this.model.toJSON();
        this.$el.html(this.template(obj));
        return this;
    }
});

AuthLoginView = AuthRegisterView.extend({
  template: null,
    className: 'full_height',
  events: {
    "click .login-btn": "login",
    "change": "change"
  },
  change: function(event) {
    // Apply the change to the model
    var target = event.target;
    var change = {};
    var value = $(target).val();

    if (value.trim) {
      value = value.trim();
    }

    change[target.name] = value;
    this.model.set(change);
  },
  validatePhone: function() {
    if ($('.validate-phone').prop("disabled")) {
      return ;
    }
    if (!this.model.get('mobile_phone')) {
      toast(trans['user.PLEASE_INPUT_PHONE'], 'alert');
      return ;
    }
  },

  //TODO
  login: function() {
    if (!this.model.get('mobile_phone') && !this.model.get('smscode')) {
      toast(trans['user.PLEASE_INPUT_PHONE'], 'alert');
      return ;
    }
    if ($("input[name='password']").length > 0) {
      if (!this.model.get('password')) {
          toast(trans['user.PLEASE_INPUT_PASSWORD'], 'alert');
          return ;
      }
    }
    var that = this;
    $('.login-btn').prop('disabled', true);

    var data = that.model.toJSON();
    $.ajax({
      method: "POST",
      url: ROOT_PATH + '/login',
      data: data,
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    }).then(function(data) {
      if(data) {
          if(data == 'port fail') {
              loadTemplates(templateList).then(function() {
                  window.router.navigateTo('active');
              });
          } else {
              loadTemplates(templateList).then(function() {
                  window.router.navigateTo('profile');
              });
          }
      } else {
          $('.login-btn').prop('disabled', false);
          toast(trans['user.Login_fail'], 'alert');
      }
    }, function() {
      $('.login-btn').prop('disabled', false);
      toast(trans['user.Login_fail'], 'alert');
    });
  }
});

AuthActiveView = BaseView.extend({
    initialize: function(obj) {
    },
    render: function () {

        //TODO, set the list of size

        this.$el.html(this.template());
        $('._dialog_overlay').remove();

        return this;
    },
});